//
// Buttons
// --------------------------------------------------


// Base styles

.btn {
  display: inline-flex;
  font-weight: @btn-font-weight;
  text-align: center;
  cursor: pointer;
  border: @border-width solid transparent;
  white-space: nowrap;
  user-select: none;
  color: inherit;
  background: transparent;
  justify-content: center;
  align-items: center;
  white-space: pre-line;

  .button-size(@btn-size; @font-size-base;);

  &:extend(.state all);
}


// Button Sizes

.btn-lg {.button-size(@btn-size-lg; @font-size-large;);}
.btn-sm {.button-size(@btn-size-sm; @font-size-small;);}
.btn-xs {.button-size(@btn-size-xs; @font-size-small;);}
.btn-icon {padding-left: 0; padding-right: 0;}

.btn-wide {min-width: (80*@rem);}

// Block button

.btn.block {width: 100%;}


// Vertically space out multiple block buttons

.btn.block + .btn.block {margin-top: @space-sm;}


// Label or badge in button

.btn > .label {
  position: relative;
  top: (-1*@rem);
}

.iconbutton {
  padding-left: 0;
  padding-right: 0;

  color: @color-gray;

  &:hover {
    color: @color-primary;
  }

  &:active,
  &:focus {
    color: @color-focus;
    background-color: @color-white;
  }
}

.btn {
  .icon + .text {margin-left: (8*@rem);}
}
